import EmojiUtil from '../../utils/emoji.js';

class MessageComponent {
    static createMessage(content, type, options = {}) {
        const { messageId, responseTime } = options;
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${type}-message`;
        if (messageId) {
            messageDiv.id = `message-${messageId}`;
        }

        const messageContent = this.createMessageContent(content, type, responseTime);
        messageDiv.appendChild(messageContent);

        return messageDiv;
    }

    static createMessageContent(content, type, responseTime) {
        const contentDiv = document.createElement('div');
        contentDiv.className = 'message-content';
        
        if (type === 'ai') {
            // 添加头像和名称容器
            const headerDiv = document.createElement('div');
            headerDiv.className = 'message-header';
            headerDiv.innerHTML = `
                <img src="images/cz_title.jpg" class="avatar" alt="财小资">
                <span class="agent-name">财小资(财小资)</span>
            `;
            contentDiv.appendChild(headerDiv);

            // 创建消息文本容器
            const messageTextDiv = document.createElement('div');
            messageTextDiv.className = 'message-text';
            
            // 配置 marked 选项
            marked.setOptions({
                breaks: true,
                gfm: true,
                emoji: true
            });
            
            // 渲染 markdown 并处理 emoji
            let htmlContent = marked.parse(content);
            htmlContent = EmojiUtil.replaceEmojis(htmlContent);
            messageTextDiv.innerHTML = htmlContent;
            
            // 将消息文本添加到主容器
            contentDiv.appendChild(messageTextDiv);

            // 添加响应时间和反馈部分
            const footerDiv = document.createElement('div');
            footerDiv.className = 'message-footer';
            
            // 响应时间
            if (responseTime) {
                const timeDiv = document.createElement('div');
                timeDiv.className = 'response-time';
                timeDiv.innerHTML = `响应时间：${responseTime}秒 ${EmojiUtil.wrapEmoji('⏱️')}`;
                footerDiv.appendChild(timeDiv);
            }

            // 添加反馈部分
            const feedbackDiv = document.createElement('div');
            feedbackDiv.className = 'feedback-section';
            feedbackDiv.innerHTML = `
                <span class="feedback-question">该回答是否可信？</span>
                <div class="feedback-buttons">
                    <button class="feedback-btn yes" onclick="handleFeedback(this, true)">
                        ${EmojiUtil.wrapEmoji('👍')} 是
                    </button>
                    <button class="feedback-btn no" onclick="handleFeedback(this, false)">
                        ${EmojiUtil.wrapEmoji('👎')} 否
                    </button>
                </div>
            `;
            footerDiv.appendChild(feedbackDiv);
            
            // 将页脚添加到主容器
            contentDiv.appendChild(footerDiv);
        } else {
            contentDiv.textContent = content;
        }

        return contentDiv;
    }

    static createWaitingIndicator(messageId) {
        const waitingDiv = document.createElement('div');
        waitingDiv.className = 'waiting-indicator';
        waitingDiv.id = `waiting-${messageId}`;
        waitingDiv.innerHTML = `等待响应中... 0秒 ${EmojiUtil.wrapEmoji('⌛')}`;
        return waitingDiv;
    }
}

export default MessageComponent; 